<template>
  <div class="club-activity-management">
    <!-- 搜索和创建活动区域 -->
    <div class="action-bar">
      <div class="search-container">
        <el-input
            v-model="searchName"
            placeholder="输入活动名称搜索"
            class="search-input"
            @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button @click="handleSearch" type="primary">搜索</el-button>
      </div>
    </div>

    <!-- 活动列表 -->
    <el-table :data="paginatedActivityList" class="activity-table">
      <el-table-column prop="id" label="活动编号" />
      <el-table-column prop="name" label="活动名" />
      <el-table-column prop="status" label="活动状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="活动开始时间" />
      <el-table-column prop="endTime" label="活动结束时间" />
      <el-table-column label="操作" >
        <template #default="{ row }">
          <el-button size="small" @click="handleDetails(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import {
  ActivityControllerService,
  type ActivityQueryRequest, type ActivityVO,
} from "../../../../../generated";
import {useUserStore} from "../../../../stores/user.ts";
import {useRoute, useRouter} from "vue-router";

interface ShowedActivity{
  id: number;
  name: string;
  status: string;
  startTime: string;
  endTime: string;
}

const store = useUserStore();
const searchName = ref('')
const activityList = ref<ShowedActivity[]>([]);

const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = computed(() => activityList.value.length)

// 分页后的活动列表
const paginatedActivityList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return activityList.value.slice(start, end)
})

const route = useRoute();
const clubId = Number(route.query.clubId);
const queryRequest = ref<ActivityQueryRequest>({
  pageSize: 10,
  current: 1,
  clubId: clubId,
});

const loadData = async () => {
  try {
    const res = await ActivityControllerService.listActivityVoByPage(
        queryRequest.value,
    );
    if (res.code === 0 && res.data?.records) {
      const activityVoList = res.data.records as ActivityVO[];
      activityList.value = activityVoList.map((activityVo) => ({
        id: activityVo.id,
        name: activityVo.activityName,
        startTime: activityVo.startTime,
        endTime: activityVo.endTime,
        status: activityVo.status,
      } as ShowedActivity));
    } else {
      activityList.value = [];
      ElMessage.error("加载数据失败：" + (res.message || "未知错误"));
    }
  } catch (error) {
    console.error("加载数据时发生错误:", error);
    ElMessage.error("加载数据时发生错误，请稍后重试");
    activityList.value = [];
  }
}

onMounted(() => {
  loadData();
})

// 搜索处理
const handleSearch = () => {
  queryRequest.value.activityName = searchName.value;
  queryRequest.value.current = 1;
  currentPage.value = 1
  loadData();
}

// 页码改变处理
const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 获取状态对应的标签类型
const getStatusType = (status: string) => {
  switch (status) {
    case '待审核':
      return 'info'
    case '确认举办':
      return 'info'
    case '进行中':
      return 'success'
    case '已结束':
      return ''
    default:
      return 'danger' // 用于"已取消"状态
  }
}

const router = useRouter();
// 详情按钮处理
const handleDetails = (row: ShowedActivity) => {
  router.push({
    path: '/activity/details',
    query: { activityId: row.id, clubId: clubId },
  });
}
</script>

<style scoped>
.club-activity-management {
  padding: 20px;
  background: white;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-input {
  width: 300px;
  margin-right: 10px;
}

.activity-table {
  width: 100%;
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>